<template>
  <div style="width: 100%;overflow: hidden">
    <div class="header">
      <span class="text1">机械管理</span>
      <el-button type="text" class="text2" @click="goOff()">
        返回
      </el-button>
    </div>
    <div class="all">
    <!-- 表头 -->
    <div class="card">
      <div class="card-body">
<!--  添加表单-->
        <div style="display: flex; align-items: center">
          <el-popover placement="right" :width="400" trigger="click" style="float: right" >
            <template #reference>
              <el-button type="primary" style="margin-left: 30px">新增数据</el-button>
            </template>
            <el-form ref="dataRef" :model="ruleForm" status-icon :rules="rules">
              <el-row>
                <el-col :span="12">
                  <template v-for="item in formItems1" :key="item.prop">
                    <el-form-item :prop="item.prop" >
                      <el-input size="default" :placeholder="item.placeholder" v-model="ruleForm[item.prop]"></el-input>
                    </el-form-item>
                  </template>
                </el-col>
                <el-col :span="12">
                  <template v-for="item in formItems2" :key="item.prop">
                    <el-form-item :prop="item.prop" >
                      <el-input size="default" :placeholder="item.placeholder" v-model="ruleForm[item.prop]"></el-input>
                    </el-form-item>
                  </template>
                  <el-button style="margin-left: 16px;height: 30px;width: 150px;margin-bottom: 10px" type="primary" @click="submitData">提交</el-button>
                </el-col>
              </el-row>
            </el-form>
          </el-popover>
          <el-button type="danger" @click="deleteAll">删除选中项</el-button>
          <el-button type="success" @click="solveAll">已解决</el-button>
        </div>
      </div>
    </div>
    <div style="margin-top: 20px">
      <el-table
          :data="filterTableData"
          border style="width: 100%;"
          max-height="650px"
          v-loading="loading"
          @selection-change="handleSelectionChange"
          :columns="tableColumns"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column fixed prop="sequence" label="序号" width="60" />
        <el-table-column prop="dyna_idis" label="功图流水号" width="120" />
        <el-table-column prop="well_idis" label="通用井名" width="120" />
        <el-table-column prop="check_dateis" label="RTU采集时间" width="120" />
        <el-table-column prop="dyna_create_timeis" label="数据库功图入库存储时间" width="120" />
        <el-table-column prop="Strokeis" label="冲程M" width="120" />
        <el-table-column prop="Frequencyis" label="冲次次/min" width="120" />
        <el-table-column prop="dyna_pointsis" label="功图点数" width="120" />
        <el-table-column prop="Displacementis" label="位移值" width="120" show-overflow-tooltip="true"/>
        <el-table-column prop="disp_loadis" label="位移点对应载荷值" width="120" show-overflow-tooltip="true" />
        <el-table-column prop="disp_currentis" label="位移点对应电流值" width="120" show-overflow-tooltip="true" />
        <el-table-column prop="active_poweris" label="位移点对应有功功率值" width="120" show-overflow-tooltip="true" />
        <el-table-column prop="reactive_poweris" label="位移点对应无功功率图" width="120" />
        <el-table-column prop="power_factoris" label="功率因数" width="120" />
        <el-table-column prop="assem_idis" label="设备唯一标识设备IP+设备地址" width="150" />
        <el-table-column prop="susp_max_loadis" label="最大载荷" width="120" />
        <el-table-column prop="susp_min_loadis" label="最小载荷" width="120" />
        <el-table-column prop="upgoing_max_currentis" label="上行电最大电流" width="120" />
        <el-table-column prop="downgoing_max_currentis" label="下行电最大电流" width="120" />
        <el-table-column prop="Describeis" label="说明" width="120" />
        <el-table-column prop="result" label="诊断结果" width="120" />
        <el-table-column prop="probabilities" label="概率" width="120" />
        <el-table-column fixed="right" label="Operations" width="120">
          <template #header>
            <el-input v-model="search" size="small" placeholder="Type to search" />
          </template>
          <template #default="scope">
            <el-button link type="primary" size="small" @click="remove(scope.row.sequence)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</div>
</template>

<script>
import axios from 'axios'
import {ElLoading} from "element-plus";
export default {
  name: "manage",
  data() {
    return {
      search:'',
      ruleForm: {
        dyna_idis:'',
        well_idis:'',
        well_common_nameis:'',
        check_dateis:'',
        dyna_create_timeis:'',
        Strokeis:'',
        Frequencyis:'',
        dyna_pointsis:'',
        Displacementis:'',
        disp_loadis:'',
        disp_currentis:'',
        active_poweris:'',
        reactive_poweris:'',
        power_factoris:'',
        assem_idis:'',
        susp_max_loadis:'',
        susp_min_loadis:'',
        upgoing_max_currentis:'',
        downgoing_max_currentis:'',
        Describeis:'',
      },
      formItems1: [
        { prop: "dyna_idis", placeholder: "请输入功图流水号" },
        { prop: "well_common_nameis", placeholder: "请输入通用井名" },
        { prop: "check_dateis", placeholder: "请输入RTU采集时间" },
        { prop: "dyna_create_timeis", placeholder: "请输入数据库功图入库存储时间" },
        { prop: "Strokeis", placeholder: "请输入冲程M" },
        { prop: "Frequencyis", placeholder: "请输入冲次次/min" },
        { prop: "dyna_pointsis", placeholder: "请输入功图点数" },
        { prop: "Displacementis", placeholder: "请输入位移值" },
        { prop: "disp_loadis", placeholder: "请输入位移点对应载荷值" },
        { prop: "disp_currentis", placeholder: "请输入位移点对应电流值" },
      ],
      formItems2: [
        { prop: "active_poweris", placeholder: "请输入位移点对应有功功率值" },
        { prop: "reactive_poweris", placeholder: "请输入位移点对应无功功率图" },
        { prop: "power_factoris", placeholder: "请输入功率因数" },
        { prop: "assem_idis", placeholder: "请输入设备唯一标识设备IP+设备地址" },
        { prop: "susp_max_loadis", placeholder: "请输入最大载荷" },
        { prop: "susp_min_loadis", placeholder: "请输入最小载荷" },
        { prop: "upgoing_max_currentis", placeholder: "请输入上行电最大电流" },
        { prop: "downgoing_max_currentis", placeholder: "请输入下行电最大电流" },
        { prop: "Describeis", placeholder: "请输入说明" },
      ],
      rules: {
        dyna_idis: [
          { required: true, message: '不能为空', trigger: 'blur'}
        ],
        well_common_nameis: [
          { required: true, message: '不能为空', trigger: 'blur'}
        ],
        check_dateis: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        dyna_create_timeis: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        Strokeis: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        Frequencyis: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        dyna_pointsis: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        Displacementis: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        disp_loadis: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        disp_currentis: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        active_poweris: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        reactive_poweris: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        power_factoris: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        assem_idis: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        susp_max_loadis: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        susp_min_loadis: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        upgoing_max_currentis: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        downgoing_max_currentis: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        Describeis: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
      },
      tableColumns: [
        {
          type: 'selection',
          width: '55px'
        },
      ],
      selectedItems: [], // 选中的项
      tableData: [],
      selectArray: [],
    }
  },

  computed: {
    filterTableData() {
      return this.tableData.filter(data =>
          !this.search ||
          data.dyna_idis.toLowerCase().includes(this.search.toLowerCase())
      );
    }
  },
  created() {
    const loading = ElLoading.service({ fullscreen: true })
    setTimeout(() => {
      loading.close()
    }, 2000)
    this.getCsvData()
    this.saveNumber()
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedItems = selection;
      const jsonSelect = JSON.stringify(this.selectedItems)
      const data = JSON.parse(jsonSelect)
      this.selectArray = data.map(item => item.sequence)
      console.log(this.selectArray)
    },
    goOff(){
      this.$router.go(-1)
    },
    deleteAll() {
      const jsonSelect = JSON.stringify(this.selectArray)
      const Data = JSON.parse(jsonSelect)
      const json0 = Data.map(item => item)
      if (json0 == 0){
        this.$message.error('请选择要删除的内容')
      }
      else {
        const json = {"sequence": json0}
        axios.post('/user/deleteAll',json).then(response => {
          this.$message.success('删除成功')
          this.saveNumber()
          this.getCsvData()
          const loading = ElLoading.service({ fullscreen: true })
          setTimeout(() => {
            loading.close()
          }, 2000)
          console.log(response)
        }).then(error => {
          console.log(error)
        })
      }
    },
    solveAll() {
      const jsonSelect = JSON.stringify(this.selectArray)
      const Data = JSON.parse(jsonSelect)
      const json0 = Data.map(item => item)
      if (json0 == 0){
        this.$message.error('请选择已解决的序号')
      }
      else {
        const json = {"sequence": json0}
        axios.post('/user/deleteAll',json).then(response => {
          this.$message.success('标记解决成功')
          this.saveNumber()
          this.getCsvData()
          const loading = ElLoading.service({ fullscreen: true })
          setTimeout(() => {
            loading.close()
          }, 2000)
          console.log(response)
        }).then(error => {
          console.log(error)
        })
      }
    },
    submitData() {
      this.$refs['dataRef'].validate((valid) => {
        if (valid) {
          // 验证通过
          this.$request.post('/user/updateData', this.ruleForm).then(res => {
            if (res.code === '200') {
              this.$message.success('上传成功')
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    getCsvData() {
      axios.get('/user/getCsvData').then(response => {
        console.log(response.data)
        console.log(response)
            this.tableData = response.data;
          }).catch(error => {
            console.error(error);
          });
    },
    saveNumber() {
      axios.get('/user/saveNumber').then(response => {
        console.log(response)
      }).catch(error => {
        console.log(error)
      })
    },
    remove(sequence) {
      const se = {
        "sequence": sequence
      }
      axios.post('/user/delete',se).then(response => {
        this.saveNumber()
        this.getCsvData()
        this.$message.success('删除成功')
        console.log(response)
      }).catch(error => {
        console.log(error)
      })
    },

  },

}
</script>

<style scoped>
.header{
  height: 70px;
  background-color:rgba(151, 171, 215, 0.12) ;
  margin-bottom: 20px;
}
.text1{
  margin-left:160px;
  position: absolute;
  top:20px;
}
.text2{
  margin-left: 63em;
  padding-top: 1.7em;
  font-size: 20px;
  color: #515a6e;
}
table{
  height: 180px;
  font-size:small;
}
thead{
  background-color:rgba(151, 171, 215, 0.12) ;
  color: black;
}
.card{
  background-color:white;

}
h3{
  color: black;
}
button{
  /*background-color: darkgreen;*/
  color: aliceblue;
}
td{
  border: 2px solid #515a6e;
}
.search1{
  width: 100%;
  height: 70px;
  border-radius: 10px;

}
body{
  background: #f2f2f2;
  font-family: 'Open Sans', sans-serif;
}

.search{
  width: 100%;
  position: relative;
  display: flex;
}

.searchTerm {
  width: 50%;
  border: 1px solid #515a6e;
  border-right: none;
  padding: 5px;
  height: 20px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #9DBFAF;
}

.searchTerm:focus{
  color: #00B4CC;
}

.searchButton {
  width: 35px;
  height: 31px;
  border: 1px solid #00B4CC;
  background:#515a6e;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
  padding-top: 2px;
}

/*调整大小查看搜索栏的变化*/
.wrap{
  width: 50%;
  position: absolute;
  top: 4%;
  left: 85%;
  transform: translate(-50%, -50%);
}
a{
  text-decoration: none;
}
th{
  border: 1px solid #515a6e;
}
</style>
